<template>
  <div class="hello">
      <el-button type="primary" @click="test">测试</el-button>
    <h2>Essential Link1111s</h2>
    <!-- <el-table :data="permissionConfig" stripe style="width: 100%">
        <el-table-column prop="field" label="字段" width="180" />
        <el-table-column prop="permission" label="操作权限" width="290">
          <template #default="scope">
            <el-form>
              <el-checkbox-group v-model="scope.row.permission"  @change="handleCheckedObjChange">
                <el-checkbox
                  v-for="child in scope.row.menu"
                  :key="child.id"
                  :label="child.label"
                  v-module="child.value"
                  size="mini"
                  text-color="#FF0000"
                />
              </el-checkbox-group>
            </el-form>
          </template>
        </el-table-column>
 </el-table> -->



  <el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="isReviewer? filterList : null"
       :filter-method="filterMethod"
      filter-placement="bottom-end">
 
    </el-table-column>
  </el-table>

  </div>
</template>

<script>



export default {
  name: 'HelloWorld',
  data () {

    
    return {
      filterList:[{ text: '家', value: '家' }, { text: '公司', value: '公司' }],
      isReviewer:true,
      filterMethod:null,
       tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }],
     
      msg: 'Welcome to Your Vue.js App',
      permissionConfig: [
  {
    field: '姓名',
    permission: ['可见','不可写'],
    menu: [
      {
        label: '可见',
        id: 1,
      },
      {
        label: '不可写',
        id: 0,
      },
    ],
  },
  
  {
    field: '人力意见',
    permission: [],
    menu: [
      {
        label: '可见',
        id: 1,
      },
      {
        label: '不可写',
        id: 0,
      },
    ],
  },
  {
    field: '总经理意见',
    permission: [],
    menu: [
      {
        label: '可见',
        id: 1,
        value: false
      },
      {
        label: '不可写',
        id: 0,
      },
    ],
  },
]
      
    }
  },
  mounted() {
 this.filterMethod = this.isReviewer ? this.filterHandler: null;
  },
  methods: {
     handleCheckedObjChange() {
       console.log(this.permissionConfig, 'permissionConfig')
     },
     test() {
       console.log(this.permissionConfig, '9999---')
     },

       resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
